<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>02.处理服务器返回的Json数据</title>
  </head>
  <body>
    <p class="xhr"></p>
    <script>
      // 1.创建ajax 对象
      const xhr = new XMLHttpRequest();
      // 2. 配置ajax 对象
      xhr.open("get", "http://localhost:3000/responseData");
      // 3. 发送请求
      xhr.send();
      // 4. 对响应的数据做处理
      xhr.onload = function () {
        // 响应的数据
        console.log("接受到来自服务器端的数据(Json)：");
        /*
         *    服务器一般发送的数据是Json格式
         */
        console.log(xhr.responseText);
        /*
         *   客户端浏览器以字符串形式接收数据。
         */
        console.log("浏览器以string形式接收");
        console.log(typeof xhr.responseText);
        /**
         *     但是，浏览器会以string类型接收
         *     所以转换还原成Json比较好便于后期处理
         **/
        let responseText = JSON.parse(xhr.responseText);
        // 后端数据写入页面
        document.getElementsByClassName("xhr")[0].innerHTML = responseText.name;
      };
    </script>
  </body>
</html>
